<template>
    <view class="mine" :style="{paddingTop:headHeight*2+'rpx'}">
        <myhead title="个人中心" :background="{background:'#f50'}" ></myhead>
		<view class="mine-top">
			<view class="userinfo" v-if="userInfo">
				<u-avatar class="avatar" :src="userInfo.avatarUrl"></u-avatar>
				<view class="name">{{userInfo.nickName}} </view>
			</view>
			<view class="userinfo" v-else>
				<u-avatar  class="avatar" src="http://47.104.209.44/base/img/1.jpg"></u-avatar>
				<view  class="name">未登录</view>
			</view>
		</view>

		<view class="list">
			<u-cell-group :border="true">
				<template v-if="userInfo">
					<u-cell-item icon="weixin-fill" title="我的信息" value="10"></u-cell-item>
					<u-cell-item icon="thumb-up-fill" title="我的收益" value="3"></u-cell-item>
					<u-cell-item icon="heart-fill" title="我的号码" value="未设置"></u-cell-item>
					<u-cell-item icon="bag-fill" title="我的订单" value="7"></u-cell-item>
					<u-cell-item icon="clock-fill" title="我的客户" value="9"></u-cell-item>
					<u-cell-item icon="bell-fill" title="我的积分" value="100"></u-cell-item>
				</template>
				<u-cell-item icon="setting-fill" title="设置" ></u-cell-item>
				<u-cell-item icon="email-fill" title="清除缓存" ></u-cell-item>
			</u-cell-group>
		</view>

		<view class="lougout" v-if="userInfo">
			<u-button class="logoutbtn" @click="logoutaction">退出登录</u-button>
		</view>
		
		

		<u-modal v-model="show" content="你还没有登录,请先授权" title="授权登录"
			@confirm="authLogin"
			:show-cancel-button="true"
		></u-modal>
    </view>
</template>


<script>
const db = wx.cloud.database()
export default {
	data(){
		return {
			show:false,
			content:""
		}
	},
	methods:{
		logoutaction(){
			this.changeUserInfo(null)
			uni.setStorageSync("userInfo",null);
		},
		authLogin(){
			wx.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: (res) => {
					const {userInfo}  = res;
					uni.setStorageSync("userInfo",userInfo);
					this.changeUserInfo(userInfo);
					// 存储到本地 
					// 查询不到就存储到本地
					uni.showToast({
						title:"授权成功"
					})
					db.collection("wh10_users")
					.where({
						nickName:userInfo.nickName
					})
					.get()
					.then(res=>{
						console.log(res)
						if(!res.data.length>0){
							db.collection("wh10_users")
							.add({
								data:userInfo
							})
							.then(res=>{
								
							})
						}
					})
				}
			})
		}
	},
	onShow(){
		if(!uni.getStorageSync("userInfo")){
			this.show = true;
		}
	}
}
</script>

<style lang="scss">
	.mine{
		width:100%;
		height:100%;
		padding-bottom:30rpx;
		.mine-top{
			width:100%;
			height:350rpx;
			border-bottom-left-radius:100rpx;
			border-bottom-right-radius:100rpx;
			background:#f50;
			.userinfo{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding:25rpx 0;
				.avatar{
					margin:20rpx 0;
				}
				.name{
					color:#fff;
					font-size: 26rpx;
					font-weight: bold;
				}
			}
		}
		.list{
			margin-top:70rpx;
			border-radius: 15px;
			overflow: hidden;
			margin-bottom:20rpx;
		}
		.logoutbtn{
			width:100%;
			margin:20rpx 0;
			.u-btn--default{
				width:80%;
				// background: transparent;
			}
		}
	}
</style>